<%-- 
    Document   : Home
    Created on : Apr 21, 2013, 10:59:58 PM
    Author     : Sean
--%>

<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<%@page import="business.*, java.util.ArrayList, java.lang.*;"contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Billing</title>
        <link rel="stylesheet" type="text/css" href="site.css">
        
<%

Cart cart = (Cart) session.getAttribute("cart"); 
                       session.setAttribute("cart", cart);
                       ArrayList<LineItem> items = cart.getItems();

%>    
        
 
    </head>
    
    
    
    
    <body onload="onLoad()"> 
        <div id="Main-wrapper">
            <div id="header-wrapper">
                <div id="header">
                    <div class="header-content">
                        IST 411 E-Commerce
                    </div> 
                </div>
            </div>
            
            
            
            <div id="Main-content">
                <div class="steps">
                    <div style="float: left; width: 320px; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; font-weight: bold;">
                        1. &nbsp; &nbsp;  Shipping
                    </div>
                    <div style="float: left; width: 320px; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; background: #ccccff; font-weight: bold;">
                        2. &nbsp; &nbsp;  Billing
                    </div>
                    <div style="float: left; width: 320px; border: 1px solid black; text-align: center; padding-top: 4px; padding-bottom: 4px; font-weight: bold;">
                        3. &nbsp; &nbsp;  Review
                    </div>
                    <div style="clear: both;"></div>
                </div>
                <div class="billing">
                    <form action="GatewayServlet" method="post">
                        <div style="float: left; width: 450px; height: 275px;"> 
                            <div style="font-size: 1.5em;">
                                Shipping Address
                            </div>
                            <hr/>
                            <div style="margin-top: 15px; float: left; width: 200px">
                                Name <span style="color: #ac2626;">*</span>
                                <br/>
                               <!-- Must Modify for JSF (Needs Managed Bean)- Shippingname  -->
                                <input type="text" name="ShippingName" value="<% out.println(request.getAttribute("name")); %>" style="width: 200px;" disabled/>
                                <br/><br/>
                                Address <span style="color: #ac2626;">*</span>
                                <br/>
                               <!-- Must Modify for JSF (Needs Managed Bean)- Shipping Address  -->
                                <input type="text" name="ShippingAddress" id="ShippingAddress" value="<% out.println(request.getAttribute("address")); %>" style="width: 200px;" disabled/>
                                <br/><br/>
                                City <span style="color: #ac2626;">*</span>
                                <br/>
                                <!-- Must Modify for JSF (Needs Managed Bean)- Shipping City -->
                                <input type="text" name="ShippingCity" id="ShippingCity" value="<% out.println(request.getAttribute("city")); %>" style="width: 200px;" disabled/>
                                <br/><br/>
                                <div style="float: left; width: 120px;">
                                State <span style="color: #ac2626;">*</span>
                                <select name="ShippingState" id="ShippingState" style="width: 120px;" disabled> 
                                    <option value="<% out.print(request.getAttribute("state")); %>"><% out.println(request.getAttribute("state")); %></option> 
                                    <option value="AL">Alabama</option> 
                                    <option value="AK">Alaska</option> 
                                    <option value="AZ">Arizona</option> 
                                    <option value="AR">Arkansas</option> 
                                    <option value="CA">California</option> 
                                    <option value="CO">Colorado</option> 
                                    <option value="CT">Connecticut</option> 
                                    <option value="DE">Delaware</option> 
                                    <option value="DC">District Of Columbia</option> 
                                    <option value="FL">Florida</option> 
                                    <option value="GA">Georgia</option> 
                                    <option value="HI">Hawaii</option> 
                                    <option value="ID">Idaho</option> 
                                    <option value="IL">Illinois</option> 
                                    <option value="IN">Indiana</option> 
                                    <option value="IA">Iowa</option> 
                                    <option value="KS">Kansas</option> 
                                    <option value="KY">Kentucky</option> 
                                    <option value="LA">Louisiana</option> 
                                    <option value="ME">Maine</option> 
                                    <option value="MD">Maryland</option> 
                                    <option value="MA">Massachusetts</option> 
                                    <option value="MI">Michigan</option> 
                                    <option value="MN">Minnesota</option> 
                                    <option value="MS">Mississippi</option> 
                                    <option value="MO">Missouri</option> 
                                    <option value="MT">Montana</option> 
                                    <option value="NE">Nebraska</option> 
                                    <option value="NV">Nevada</option> 
                                    <option value="NH">New Hampshire</option> 
                                    <option value="NJ">New Jersey</option> 
                                    <option value="NM">New Mexico</option> 
                                    <option value="NY">New York</option> 
                                    <option value="NC">North Carolina</option> 
                                    <option value="ND">North Dakota</option> 
                                    <option value="OH">Ohio</option> 
                                    <option value="OK">Oklahoma</option> 
                                    <option value="OR">Oregon</option> 
                                    <option value="PA">Pennsylvania</option> 
                                    <option value="RI">Rhode Island</option> 
                                    <option value="SC">South Carolina</option> 
                                    <option value="SD">South Dakota</option> 
                                    <option value="TN">Tennessee</option> 
                                    <option value="TX">Texas</option> 
                                    <option value="UT">Utah</option> 
                                    <option value="VT">Vermont</option> 
                                    <option value="VA">Virginia</option> 
                                    <option value="WA">Washington</option> 
                                    <option value="WV">West Virginia</option> 
                                    <option value="WI">Wisconsin</option> 
                                    <option value="WY">Wyoming</option>
                                </select>
                                </div>
                                <div style="float: left; width: 70px; margin-left: 7px;">
                                    Zipcode <span style="color: #ac2626;">*</span>
                                    <br/>
                                    <input type="text" name="ShippingZip" id="ShippingZip" value="<% out.print(request.getAttribute("zip")); %>" style="width: 70px;" disabled/>
                                </div>

                            </div>
                            <div style="margin-top: 15px; float: left; margin-left: 40px; width: 200px;">
                                Phone <span style="color: #ac2626;"></span>
                                <br/>
                               <!-- Must Modify for JSF (Needs Managed Bean)- cardholder Phone  -->
                                <input type="text" name="Phone" style="width: 200px;" disabled/>
                                <br/><br/>
                                Email <span style="color: #ac2626;"></span>
                                <br/>
                               <!-- Must Modify for JSF (Needs Managed Bean)- cardholder Email  -->
                                <input type="Email" name="Email" style="width: 200px;" disabled/>
                                <br/><br/>
                            </div>
                        </div>
                        
                        <div style="float: left; width: 470px; margin-left: 40px; height: 275px;">
                           <div>
                               <span style="font-size: 1.5em;">Billing Address</span><div style="float: right;"> <input type="checkbox" onclick="SetBilling(this.checked);" checked/> Same as Shipping</div>
                           </div>
                            <hr/>
                            <div style="margin-top: 15px; float: left; width: 200px">
                                
                                Address <span style="color: #ac2626;">*</span>
                                <br/>
                               <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                               <input type="text" name="BillingAddress" id="BillingAddress" style="width: 200px;" disabled/>
                                <br/><br/>
                                City <span style="color: #ac2626;">*</span>
                                <br/>
                                <!-- Must Modify for JSF (Needs Managed Bean)- cardnumber -->
                                <input type="text" name="BillingCity" id="BillingCity" style="width: 200px;" disabled/>
                                <br/><br/>

                                <!-- Must Modify for JSF (Needs Managed Bean)- cardnumber -->
                                <div style="float: left; width: 120px;">
                                State <span style="color: #ac2626;">*</span>
                                <select name="BillingState" id="BillingState"  style="width: 120px;"> 
                                    <option value="" disabled>Select a State</option> 
                                    <option value="AL">Alabama</option> 
                                    <option value="AK">Alaska</option> 
                                    <option value="AZ">Arizona</option> 
                                    <option value="AR">Arkansas</option> 
                                    <option value="CA">California</option> 
                                    <option value="CO">Colorado</option> 
                                    <option value="CT">Connecticut</option> 
                                    <option value="DE">Delaware</option> 
                                    <option value="DC">District Of Columbia</option> 
                                    <option value="FL">Florida</option> 
                                    <option value="GA">Georgia</option> 
                                    <option value="HI">Hawaii</option> 
                                    <option value="ID">Idaho</option> 
                                    <option value="IL">Illinois</option> 
                                    <option value="IN">Indiana</option> 
                                    <option value="IA">Iowa</option> 
                                    <option value="KS">Kansas</option> 
                                    <option value="KY">Kentucky</option> 
                                    <option value="LA">Louisiana</option> 
                                    <option value="ME">Maine</option> 
                                    <option value="MD">Maryland</option> 
                                    <option value="MA">Massachusetts</option> 
                                    <option value="MI">Michigan</option> 
                                    <option value="MN">Minnesota</option> 
                                    <option value="MS">Mississippi</option> 
                                    <option value="MO">Missouri</option> 
                                    <option value="MT">Montana</option> 
                                    <option value="NE">Nebraska</option> 
                                    <option value="NV">Nevada</option> 
                                    <option value="NH">New Hampshire</option> 
                                    <option value="NJ">New Jersey</option> 
                                    <option value="NM">New Mexico</option> 
                                    <option value="NY">New York</option> 
                                    <option value="NC">North Carolina</option> 
                                    <option value="ND">North Dakota</option> 
                                    <option value="OH">Ohio</option> 
                                    <option value="OK">Oklahoma</option> 
                                    <option value="OR">Oregon</option> 
                                    <option value="PA">Pennsylvania</option> 
                                    <option value="RI">Rhode Island</option> 
                                    <option value="SC">South Carolina</option> 
                                    <option value="SD">South Dakota</option> 
                                    <option value="TN">Tennessee</option> 
                                    <option value="TX">Texas</option> 
                                    <option value="UT">Utah</option> 
                                    <option value="VT">Vermont</option> 
                                    <option value="VA">Virginia</option> 
                                    <option value="WA">Washington</option> 
                                    <option value="WV">West Virginia</option> 
                                    <option value="WI">Wisconsin</option> 
                                    <option value="WY">Wyoming</option>
                                </select>
                                </div>
                                 <div style="float: left; width: 70px; margin-left: 7px;">
                                    Zipcode <span style="color: #ac2626;">*</span>
                                    <br/>
                                    <input type="text" name="BillingZip" id="BillingZip" style="width: 70px;" disabled/>
                                </div>
                                
                            </div>
                            <div style="margin-top: 15px; float: left; margin-left: 40px; width: 200px;">
                                
                            </div>
                        </div>

                        <div style="clear: both;"></div>
                        <br/>
                        
                        <div style="margin-top: 20px;">
                            <span style="font-size: 1.5em;">Payment Information</span>
                        </div>
                        <hr/>
                    <div style="float: left; width: 400px; height: 275px;"> 
                        <div style="background: #FFFF99; padding: 5px;">
                            <div style="font-weight: bold; padding-bottom: 5px;">Payment Type</div>
                            
                            <!-- Must Modify for JSF (Needs Managed Bean) - payment type -->
                            <div style="float: right; margin-top: -20px;">
                                  <img src="resources/images/creditcards.png" width="60" />
                             </div>
                             <input type="radio" name="paymenttype" value="creditcard" checked>Credit Card
                             &nbsp; &nbsp;<input type="radio" name="paymenttype" value="paypal">Pay Pal
                             
                        </div>
                        <div style="margin-top: 15px;">
                            Cardholder Name
                            <br/>
                           <!-- Must Modify for JSF (Needs Managed Bean)- cardholder name  -->
                            <input type="text" name="Cardholdername" style="width: 400px;"/>
                            <br/><br/>
                            Card Number
                            <br/>
                            <!-- Must Modify for JSF (Needs Managed Bean)- cardnumber -->
                            <input type="text" name="Cardnumber" style="width: 400px;"/>
                            
                            <br/><br/>
                         
                            <div style="float: left; width: 140px;">
                                Expiration Date
                                <br/>
                                <!-- Must Modify for JSF (Needs Managed Bean)- Expiration Month -->
                                <select name="expmonth">
                                    <option value="Jan">January</option>
                                    <option value="Feb">February</option>
                                    <option value="Mar">March</option>
                                    <option value="Apr">April</option>
                                    <option value="May">May</option>
                                    <option value="Jun">June</option>
                                    <option value="Jul">July</option>
                                    <option value="Aug">August</option>
                                    <option value="Sept">September</option>
                                    <option value="Oct">October</option>
                                    <option value="Nov">November</option>
                                    <option value="Dec">December</option>
                                </select>
                            </div>
                            <div style="float: left; width: 130px;">
                                <br/>
                                <!-- Must Modify for JSF (Needs Managed Bean)- Expiration Year -->
                                <select name="expyear">
                                    <option value="2013">2013</option>
                                    <option value="2014">2014</option>
                                    <option value="2015">2015</option>
                                    <option value="2016">2016</option>
                                    <option value="2017">2017</option>
                                    <option value="2018">2018</option>
                                    
                                </select>
                            </div>
                            <div style="float: left; width: 130px;">
                                CSV Code
                                <br/>
                                <!-- Must Modify for JSF (Needs Managed Bean)- CSV Code -->
                                <input type="text" name="CSVCode" style="width: 128px;"/>
                            </div>
                            <div style="clear: both;"></div>
                            
                        </div>
                    </div>
                    
                    <div style="float: left; width: 510px; margin-left: 50px; border: 1px solid black; height: 300px;"> 
                        <div style="text-align: center; font-size: 1.4em; padding-top: 5px;">
                            <strong>Purchase Order</strong>
                        </div>
                        <hr/>
                        <!-- Items being purchased should be placed here along with total costs (subtotal without shipping and with shipping) -->
                        <div style="min-height: 175px; margin:auto;">
                           
                           Standard Price: $<% out.println(request.getAttribute("srate")); %> <br/>
                            Express Price: $<% out.println(request.getAttribute("erate")); %>
                                
                        </div>
                        <hr/>
                        <div>
                            <div style="float: left; padding-left: 15px;"><strong>Subtotal</strong> <i>(Without Shipping)</i>: <strong>$
                                
                                <%
                    double total = 0;
                       
                       for (int i=0; i<items.size(); i++)
                       {
                           
                           total += Double.valueOf(items.get(i).getProduct().getPrice());  
                    
                       }
                       
                       out.println(String.valueOf(total));
                    %>
                                
                                
                                </strong> </div><div style="padding-right: 15px; padding-left: 15px;"><br/> <strong>Total</strong> <i>(With Shipping):</i> <span style="color: #002B6B; font-size: 1.1em; font-weight: bold;">$
                                        
<%

double shippingPrice = 0;

//double eRate = (double) request.getAttribute("erate");
//double sRate = (double) request.getAttribute("srate");


if(request.getAttribute("shippingType") == "standard")
{
    
   shippingPrice = 9.51;

}
if( request.getAttribute("shippingType") == "express")
{
    
    shippingPrice = 18.20;

}

out.println(String.valueOf((total + shippingPrice)));

%>              
                                    
                                    </span></div>
                        </div>
                    </div>
                    <div style="clear: both;"></div>
                    <div>
                        <hr/>
                        <div style="text-align: right; margin-right: 30px;">
                        <input style="padding: 5px;" type="submit" value="Review Order" />
                        </div>
                    </div>
                    </form>
                </div>
                
                
                
                
            </div>
            <div id="footer">
               &copy; 2013 | All Rights Reserved
           </div>
            
        </div>
        
          <script type="text/javascript">
                function onLoad()
                {
                                document.getElementById('BillingAddress').value = document.getElementById('ShippingAddress').value; 
                                document.getElementById('BillingCity').value = document.getElementById('ShippingCity').value; 
                                document.getElementById('BillingState').value = document.getElementById('ShippingState').value; 
                                document.getElementById('BillingZip').value = document.getElementById('ShippingZip').value; 

                                document.getElementById('BillingAddress').disabled=true; 
                                document.getElementById('BillingCity').disabled=true; 
                                document.getElementById('BillingState').disabled=true; 
                                document.getElementById('BillingZip').disabled=true;
                }
              
                function SetBilling(checked) {
                        if (checked) {


                                document.getElementById('BillingAddress').value = document.getElementById('ShippingAddress').value; 
                                document.getElementById('BillingCity').value = document.getElementById('ShippingCity').value; 
                                document.getElementById('BillingState').value = document.getElementById('ShippingState').value; 
                                document.getElementById('BillingZip').value = document.getElementById('ShippingZip').value; 

                                document.getElementById('BillingAddress').disabled=true; 
                                document.getElementById('BillingCity').disabled=true; 
                                document.getElementById('BillingState').disabled=true; 
                                document.getElementById('BillingZip').disabled=true;

                        } else {


                                document.getElementById('BillingAddress').value = ''; 
                                document.getElementById('BillingCity').value = ''; 
                                document.getElementById('BillingState').value = ''; 
                                document.getElementById('BillingZip').value = ''; 

                                document.getElementById('BillingAddress').disabled=false; 
                                document.getElementById('BillingCity').disabled=false; 
                                document.getElementById('BillingState').disabled=false; 
                                document.getElementById('BillingZip').disabled=false; 

                        }
                }
                </script>
        

        
    </body>
</html>
